<style>
  .layui-table-cell .layui-table-sort {
    display: none;
  }

  .lay-query-box .query-lt {
    width: 90%;
  }

  .layui-table-view .layui-table-tool-self {
    display: flex;
    justify-content: flex-end;
    position: initial;
    margin-top: 12px;
  }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">


              <div class="query-lt">

                <div class="layui-inline">
                  <label class="layui-form-label">仓库：</label>
                  <div class="layui-input-inline mr0">
                    <select name="warehouseId" lay-filter="warehouseId" lay-search lay-verify="">
                      <option value=""> 请选择仓库</option>
                    </select>
                  </div>
                </div>

                 <div class="layui-inline">
                  <label class="layui-form-label">出库作业编号：</label>
                  <div class="layui-input-inline">
                    <input
                      name="workNo" id="workNo"
                      class="layui-input"
                      type="text"
                      placeholder="请输入出库作业编号"
                      autocomplete="off"
                    />
                  </div>
                </div>


                <div class="layui-inline">
                  <label class="layui-form-label">物料名称：</label>
                  <div class="layui-input-inline">
                    <input
                            name="skuName" id="skuName"
                            class="layui-input"
                            type="text"
                            placeholder="请输入物料名称"
                            autocomplete="off"
                    />
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label">物料编码：</label>
                  <div class="layui-input-inline">
                    <input
                            name="skuCode" id="skuCode"
                            class="layui-input"
                            type="text"
                            placeholder="请输入物料编码"
                            autocomplete="off"
                    />
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label">库位编码：</label>
                  <div class="layui-input-inline">
                    <input
                            name="warehouseShelfSpaceCode" id="warehouseShelfSpaceCode"
                            class="layui-input"
                            type="text"
                            placeholder="请输入库位编码"
                            autocomplete="off"
                    />
                  </div>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button
                          class="layui-btn icon-btn color-green"
                          lay-filter="formSubSearchLog"
                          lay-submit
                          layui-form-keyDownSearch="true"
                  >
                    查询
                  </button>
                  <button
                          class="layui-btn icon-btn color-white"
                          lay-filter="resets"
                          lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button id="workDetailInfoBtnExport" class="layui-btn icon-btn color-green">导出</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-bor">
        <table
          class="layui-table"
          id="productStorageWorkOutDetailTable"
          lay-filter="productStorageWorkOutDetailTable"
        ></table>
      </div>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="receiptRecordTabBar">
  <!-- {{# if(d.status == '1'){ }} -->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="audit">审核</a>
  <!-- {{# } }} -->
  <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail"
    >详情</a
  >
</script>

<!-- js部分 -->
<script>
  layui.use(
    [
      "layer",
      "form",
      "table",
      "laydate",
      "admin",
      "laytpl",
      "tableTreeDj",
      "config",
    ],
    function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var table = layui.table;
      var form = layui.form;
      var config = layui.config;
      var admin = layui.admin;
      var tableTree = layui.tableTreeDj;


      admin.req('enterprisecab/warehouse/admin/warehouse/list', {limit: 9999}, function (res) {
        if (200 == res.code) {
          var optionHtml = '<option value=""> 请选择仓库</option>';
          for (var k = 0; k < res.data.length; k++) {
            optionHtml += '<option value="' + res.data[k].id + '">' + res.data[k].name + '</option>';
          }
          $("select[name='warehouseId']").html(optionHtml);
          form.render('select');

        } else {
          layer.msg('获取仓库失败', {icon: 2, time: 1000});
        }
      }, 'GET');



      // 渲染表格
      var insTb = table.render({
        id: "#productStorageWorkOutDetailTable",
        elem: "#productStorageWorkOutDetailTable",
        url:
          config.base + "enterprise/storage/admin/productStorageWorkOutDetail/list",
        page: true,
        cellMinWidth: 100,
        cols: [
          [
            { type: "numbers", title: "序号", align: "center" },
            { field: "workNo", title: "出库作业编号", align: "center" },

            {
              field: "skuName",
              title: "物料名称",
              align: "center",
            },
            {
              field: "skuCode",
              title: "物料编码",
              align: "center",
            },
            {
              field: "skuSpec",
              title: "物料规格",
              align: "center",
            },
            { field: "receiptRecordCode", align: "center", title: "申请单编号" },
            { field: "outNum", align: "center", title: "出库数量" },
            // { field: "warehouseName", align: "center", title: "出库仓库" },
            { field: "outTypeName", align: "center", title: "出库类型" },
            {
              field: "warehouseName",
              title: "仓库",
              align: "center",
            },
            {
              field: "warehouseShelfSpaceCode",
              title: "库位编码",
              align: "center",
            },


            { field: "creatorName", align: "center", title: "操作人" },
            {
              field: "createTime",
              align: "center",
              title: "操作时间",
              width: 180,
            },

/*
            {
              align: "center",
              toolbar: "#receiptRecordTabBar",
              title: "操作",
              width: 120,
            },*/
          ],
        ],
        done: function (res, curr, count) {},
      });

      //渲染下拉
      form.render("select");

      // 工具条点击事件
      table.on("tool(productStorageWorkOutDetailTable)", function (obj) {

      });

      //监听排序
      table.on("sort(productStorageWorkOutDetailTable)", function (obj) {
        table.reload("productStorageWorkOutDetailTable", {
          initSort: obj,
          where: {
            sort: obj.field,
            order: obj.type,
          },
        });
      });

      // 搜索
      form.on("submit(formSubSearchLog)", function (data) {
        insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
      });

      // 重置搜索
      form.on("submit(resets)", (data) => {
        $(".lay-header").find("select").val("");
        $(".lay-header").find("input").val("");
        let field = data.field;
        for (let key in field) {
          field[key] = "";
        }
        insTb.reload({ where: field, page: { curr: 1 } }, "data");
      });




      $('#workDetailInfoBtnExport').click(function () {
        let skuCode = $('#skuCode').val();
        let skuName = $('#skuName').val();
        let warehouseId = $('#warehouseId').val();
        let workNo = $('#workNo').val();
        let warehouseShelfSpaceCode = $('#warehouseShelfSpaceCode').val();

        // 创建一个对象来保存所有可能的查询参数
        let queryParams = {
          skuCode: skuCode,
          skuName: skuName,
          workNo: workNo,
          warehouseId: warehouseId,
          warehouseShelfSpaceCode:warehouseShelfSpaceCode
        };

        // 过滤掉值为 undefined 的属性
        queryParams = Object.keys(queryParams)
                .filter(key => queryParams[key] !== undefined && queryParams[key] !== '')
                .reduce((obj, key) => {
                  obj[key] = queryParams[key];
                  return obj;
                }, {});

        // 将过滤后的参数对象转换为查询字符串
        let queryString = new URLSearchParams(queryParams).toString();

        // 获取当前日期和时间
        let now = new Date();
        let year = now.getFullYear();
        let month = String(now.getMonth() + 1).padStart(2, '0'); // 注意：getMonth() 返回值是 0-11
        let day = String(now.getDate()).padStart(2, '0');
        let hour = String(now.getHours()).padStart(2, '0');
        let minute = String(now.getMinutes()).padStart(2, '0');
        let second = String(now.getSeconds()).padStart(2, '0');

        // 格式化日期和时间为 YYYYMMDD_HHMMSS 形式
        let formattedDateTime = `${year}${month}${day}_${hour}${minute}${second}`;

        // 设置下载文件名为 "产品数据_YYYYMMDD_HHMMSS.xls"
        let fileName = `出库明细表_${formattedDateTime}.xls`;

        // 创建完整的URL，包括查询参数和文件名作为额外参数（如果后端支持的话）
        let fullUrl = config.base + 'enterprise/storage/admin/productStorageWorkOutDetail/export?' + queryString + '&fileName=' + encodeURIComponent(fileName);

        // 使用 window.open 打开新页面进行下载
        window.open(fullUrl + '&Authorization=Bearer ' + encodeURIComponent(config.getToken()), '_blank');
        // 注意：这里假设后端能够处理 fileName 参数，并根据它设置响应头中的 Content-Disposition 来指定下载文件名。
        // 如果后端不支持通过 URL 参数指定文件名，你可能需要调整后端代码来接受这种请求方式。
      });

    }
  );
</script>
<style>
  .addProduceStorageWorkOutDetailForm-title {
    width: 100%;
    margin-left: 20px;
  }

  .addProduceStorageWorkOutDetailForm-title .title,
  .title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    line-height: 19px;
    position: relative;
    padding: 6px 0 19px 0;
  }

  .addProduceStorageWorkOutDetailForm-title .title:after,
  .title:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 6px);
    height: 3px;
    background: #0a8b0a;
  }

  .addTable {
    height: 30px;
    margin-left: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
</style>
